<template>
	<view class="left-right">
		<!-- <mine-topCard></mine-topCard> -->
		<!-- 顶部卡片 -->
		<view class="topBox">
			<view class="my-top">
				<text>我的</text>
				<!-- 设置-------------------- -->
				<view class="setting" @click="toSetting()">
					<image src="https://cdn8.axureshop.com/demo/1689476/images/%E6%88%91%E7%9A%84/u4801.png"></image>
				</view>

			</view>
			<view class="card-box">
				<view style="display: flex;">
					<view>
						<image :src="msgData.avatar"></image>
					</view>
					<view class="tagBox">
						<view class="msgData-box">
							<text class="msgData-name"
								style="font-size: 20px;color: #fff;margin-right: 20rpx;">{{msgData.name||msgData.nickname}}</text>
							<!-- <view class="tagItem"> -->
							<up-tag text="本人" shape="circle" bgColor="#fa746b" size="mini" class="msgData-me"></up-tag>
							<up-tag text="已签约" shape="circle" bgColor="#28d094" size="mini" style="margin-left: 20rpx;"
								class="msgData-sign"></up-tag>
							<!-- </view> -->
						</view>
						<view class="nameBox">
							<text> 男</text>
							<text> 28岁</text>
						</view>
					</view>
				</view>
				<button class="homeTeam" @click="showPopup = true">切换家庭成员</button>
			</view>

			<!-- 	底部按钮弹窗-->
			<up-popup ref="popup" type="bottom" :mask-click="true" :show="showPopup" @maskClick="showPopup = false">
				<view class="popup-content">
					<text style="font-size: 18px; padding: 20rpx;">请选择签约人</text>
					<view class="member-list">
						<!-- 当前用户 -->
						<view class="member-item" @click="switchUser(userStore.userInfo)">
							<text>{{ userStore.userInfo.name || userStore.userInfo.nickname }}</text>
						</view>
						<!-- 家庭成员列表 -->
						<view v-for="member in familyMembers.otherId" :key="member._id" class="member-item"
							@click="switchUser(member)">
							<text>{{ member.otherId.name || member.nickname }}</text>
							<text class="relation-tag">{{ getRelationType(member) }}</text>
						</view>
					</view>
					<button @click="showPopup = false" style="margin-top: 20rpx;">取消</button>
				</view>
			</up-popup>
		</view>
		<!-- 组件引入 -->
		<all-list></all-list>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		useUserStore
	} from '../../store/user';
	import {
		getRelationsSearchApi,
		getUserInfoApi
	} from '../../api/login';
	import {
		onLoad
	} from "@dcloudio/uni-app";
	// 状态机
	const userStore = useUserStore();

	const msgData = ref({});
	const RelationsSearchData = ref([]);
	const showPopup = ref(false);

	// 获取用户信息
	const getUserInfo = async () => {
		const res = await getUserInfoApi();
		if (res.code === 200) {
			msgData.value = res.data;
			console.log('用户信息:', res.data);
		}
	};

	// 获取家庭成员
	const getRelationsSearch = async () => {
		const res = await getRelationsSearchApi({
			ownId: userStore.userInfo._id
		});
		if (res.code === 200) {
			RelationsSearchData.value = res.data;
			console.log('家庭成员信息:', res.data);
		}
	};
	// 选择家庭成员
	const selectMember = (member) => {
		console.log('已选择:', member);
		showPopup.value = false;
	};

	// 跳转设置页
	const toSetting = () => {
		uni.navigateTo({
			url: '/minepackge/pages/mine-setting/mine-setting'
		});
	};

	onLoad(() => {
		getUserInfo();
		getRelationsSearch();
	});
</script>

<style lang="scss" scoped>
	.left-right {
		background-color: #f0f8ff;
	}

	.homeTeam {
		width: 220rpx;
		height: 64rpx;
		color: #2984f8;
		font-size: 24rpx;
		border-radius: 16px;
		margin-right: 40rpx;

	}

	.nameBox {
		// display: inline;
		font-size: 12px;
		color: #fff;
		margin-top: 20rpx;


	}

	.tagBox {
		margin-top: 50rpx;
		display: flex;
		flex-direction: column;
	}

	.tagItem {
		margin-top: 10rpx;
		margin-right: 20rpx;
	}

	.card-box {
		// display: flex;
		// margin-bottom: 50rpx;
		width: 100%;
		margin-top: 30rpx;
		background: #2984f8;
		height: 332rpx;
		border-radius: 16px;

		// position: relative;
		image {
			width: 128rpx;
			height: 128rpx;
			margin: 40rpx;
		}
	}

	.my-top {
		display: flex;
		justify-content: space-between;

		text {
			font-size: 28px;
		}

		image {
			width: 40rpx;
			height: 40rpx;
			margin-top: 20rpx;
		}
	}

	.topBox {
		background: #fff;
		margin-bottom: 20rpx;
		padding: 0 40rpx;
		padding-bottom: 60rpx;
	}

	.msgData-box {
		display: flex;
		align-items: center;
		width: 100%;
	}

	.msgData-name {
		width: 210rpx;
		display: flex;
		white-space: nowrap;
		/* 确保文本不会换行 */
		overflow: hidden;
		/* 隐藏溢出的内容 */
		text-overflow: ellipsis;
	}

	.msgData-me,
	.msgData-sign {
		flex-shrink: 0;
		line-height: 40rpx;

	}

	.msgData-me {
		position: static;
		top: auto;
		right: auto;

	}

	.msgData-sign {
		margin-left: 20rpx;
	}

	/* 弹出层样式 */
	.popup-content {
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;
		padding: 40rpx;
	}

	.member-list {
		margin-top: 40rpx;
	}

	.member-item {
		padding: 30rpx 0;
		border-bottom: 1rpx solid #eee;
		text-align: center;
		font-size: 32rpx;
		color: #2984f8;
	}
</style>